import React, {FC, useCallback, useEffect, useMemo, useState} from "react";
import "./css/FlowNode.less";
import {createParams} from "../../utils";
import {AxiosGet} from "../../services/HttpService.tsx";
import {Button, Card, Col, Row, Spin} from "antd";
import {useTranslation} from "react-i18next";
import GlobalIcon from "../../global/GlobalIcon.tsx";
import {coreDispatch} from "../../utils/StoreUtil.tsx";
import {getLanguageById} from "../../../i18n/i18n.tsx";
import CreateFlowNodeModal from "../modal/flow/CreateFlowNodeModal.tsx";
import BaseSubmit from "../modal/BaseSubmit.tsx";

interface FlowNodeProps {
    row: any
}

const FlowNode: FC<FlowNodeProps> = (props) => {
    const {row = {}} = props;

    const {t} = useTranslation();
    const [loading, setLoading] = useState(true),
        [list, setList] = useState([]);

    const loadData = useCallback(async () => {
        const newParams = createParams({templateId: row.id}, {flowData: [row], ...props, expandAttrKey: null})
        setLoading(true);
        const {data = []} = await AxiosGet("/sf-drs/platform/processNode/getProcessNodeList", newParams);
        setLoading(false);
        setList(data);
    }, [props])

    useEffect(() => {
        loadData()
    }, [row]);

    const handleEdit = useCallback((type, item) => {
        coreDispatch("modalReducer/createModal", {
            key: `${type}-flow-node`,
            modalProps: {
                title: t(type),
                okText: getLanguageById("save"),
                cancelText: getLanguageById("cancel")
            },
            component: CreateFlowNodeModal,
            comProps: {
                type: type,
                rowId: row.id,
                viewName: "form_process_template_node_create",
                flowData: item
            },
            onFinish: (res: any) => {
                if (res) {
                    loadData();
                }
            }
        });
    }, [row]);

    const handleDelete = useCallback((item) => {
        coreDispatch("modalReducer/createModal", {
            key: `remove-flow-node`,
            modalProps: {
                title: t("delete"),
                okText: getLanguageById("determine"),
                cancelText: getLanguageById("cancel")
            },
            component: BaseSubmit,
            comProps: {
                url: "/sf-drs/platform/processNode",
                pName: "id",
                valKey: "id",
                nameKey: "name",
                flowData: [item],
                isDelete: true,
                isBatch: false,
                method: "DELETE"
            },
            onFinish: (res: any) => {
                if (res) {
                    loadData();
                }
            }
        });
    }, [])

    const renderFlowNode = useMemo(() => {
        let colSpan = {xs: 24, sm: 12, md: 8, lg: 6, xxl: 4}
        return (
            <Spin spinning={loading} wrapperClassName="sf_core_flow_node">
                <Row gutter={4}>
                    {
                        list.map((item, i) => {
                            const {name, approverList = []} = item
                            return (
                                <Col key={i} {...colSpan}>
                                    <Card
                                        className="sf_core_flow_node_card"
                                        style={{marginBottom: 10}}
                                        title={name}
                                        hoverable
                                        extra={<Button.Group size="small">
                                            <Button
                                                title={t("insertLeft")}
                                                icon={<GlobalIcon name="icon-xuanfulan-zuocetianjiayilie"/>}
                                                onClick={() => {
                                                    handleEdit("insert", item)
                                                }}
                                            />
                                            <Button
                                                title={t("edit")}
                                                icon={<GlobalIcon name="icon-edit"/>}
                                                onClick={() => {
                                                    handleEdit("edit", item)
                                                }}
                                            />
                                            <Button
                                                title={t("delete")}
                                                icon={<GlobalIcon name="icon-close-page"/>}
                                                onClick={() => {
                                                    handleDelete(item)
                                                }}
                                            />
                                        </Button.Group>}
                                    >
                                        {approverList.map(({approverName, range}, i) => <p key={i}>
                                            {`${approverName}(${range})`}
                                        </p>)}
                                    </Card>
                                </Col>
                            )
                        })
                    }
                    <Col {...colSpan}>
                        <Card
                            hoverable
                            className="sf_core_flow_node_card card_add"
                        >
                            <Button
                                size="large"
                                title={t("add")}
                                icon={<GlobalIcon name="icon-create"/>}
                                onClick={() => {
                                    handleEdit("create", {})
                                }}
                            />
                        </Card>
                    </Col>
                </Row>
            </Spin>
        )
    }, [loading]);

    return (renderFlowNode);
};

export default React.memo(FlowNode);